<template>
	<div class="wrapper">
		<!-- 顶部应用栏 -->
		<header class="mdc-top-app-bar">
			<div class="mdc-top-app-bar__row">
				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
					<button class="mdc-button mdc-button--text back-btn" @click="goBack">
						<i class="material-icons">arrow_back</i>
					</button>
					<h1 class="mdc-top-app-bar__title">地址管理</h1>
				</section>
			</div>
		</header>

		<!-- 主要内容区域 -->
		<div class="main-content">
			<!-- 地址列表部分 -->
			<ul class="addresslist">
				<li v-for="item in deliveryAddressArr" :key="item.daId" class="address-card">
					<div class="addresslist-left" @click="setDeliveryAddress(item)">
						<div class="address-header">
							<i class="material-icons">person</i>
							<h3>{{item.contactName}}{{sexFilter}} {{item.contactTel}}</h3>
						</div>
						<div class="address-body">
							<i class="material-icons">location_on</i>
							<p>{{item.address}}</p>
						</div>
					</div>
					<div class="addresslist-right">
						<button class="icon-btn" @click.stop="editUserAddress(item.daId)" title="编辑">
							<i class="material-icons">edit</i>
						</button>
						<button class="icon-btn delete-btn" @click.stop="removeUserAddress(item.daId)" title="删除">
							<i class="material-icons">delete</i>
						</button>
					</div>
				</li>
			</ul>

			<!-- 新增地址部分 -->
			<button class="addbtn mdc-button mdc-button--raised" @click="toAddUserAddress">
				<i class="material-icons">add</i>
				<span class="mdc-button__label">新增收货地址</span>
			</button>
		</div>

		<!-- 底部菜单部分 -->
		<AppFooter></AppFooter>
	</div>
</template>

<script>
	
	
	export default{
		name:'UserAddress',
		data(){
			return {
				businessId:this.$route.query.businessId,
				user:{},
				deliveryAddressArr:[]
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
			
			this.listDeliveryAddressByUserId();
		},
		computed:{
			sexFilter(){
				if(this.user.userSex==1)return '先生';
				else if(this.user.userSex==0)return '女士';
				else return '';
			},
		},
		methods: {
			goBack() {
				this.$router.go(-1);
			},
			listDeliveryAddressByUserId(){
				//查询送货地址
				this.$axios.post('DeliveryAddressController/listDeliveryAddressByUserId',this.$qs.stringify({
					userId:this.user.userId
				})).then(response=>{
					this.deliveryAddressArr = response.data;
				}).catch(error=>{
					console.error(error);
				});
			},
		setDeliveryAddress(deliveryAddress){
			//把用户选择的默认送货地址存储到localStorage中
			this.$setLocalStorage('selectedAddress_' + this.user.userId, deliveryAddress);
			// 直接返回订单确认页面，地址已存储在 localStorage 中
			this.$router.push({path:'/orders',query:{
				businessId:this.businessId,
				foodArr:this.$route.query.foodArr,
			}});
		},
			toAddUserAddress(){
				this.$router.push({path:'/addUserAddress',query:{
					businessId:this.businessId,
					foodArr:this.$route.query.foodArr
				}});
			},
			editUserAddress(daId){
				this.$router.push({path:'/editUserAddress',query:{
					businessId:this.businessId,
					daId:daId,
					foodArr:this.$route.query.foodArr
				}});
			},
			removeUserAddress(daId){
				if(!confirm('确认要删除此送货地址吗？')){
					return;
				}
			this.$axios.post('DeliveryAddressController/removeDeliveryAddress',this.$qs.stringify({
				daId:daId
			})).then(response=>{
				if(response.data>0){
					// 检查删除的是否是当前选中的地址
					let selectedAddress = this.$getLocalStorage('selectedAddress_' + this.user.userId);
					if(selectedAddress!=null && selectedAddress.daId==daId){
						// 如果删除的是当前选中的地址，清除选择
						this.$removeLocalStorage('selectedAddress_' + this.user.userId);
					}
					this.listDeliveryAddressByUserId();
					alert('地址删除成功！');
				}else{
					alert('删除地址失败！');
				}
			}).catch(error=>{
				console.error(error);
				alert('删除地址失败！');
			});
			}
		}
	}
</script>

<style scoped>
	/* 重置样式 */
	* {
		box-sizing: border-box;
	}

	.wrapper {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部应用栏 */
	.mdc-top-app-bar {
		background-color: #1976D2;
		color: white;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.mdc-top-app-bar__row {
		display: flex;
		align-items: center;
		height: 72px;
		padding: 0 20px;
	}

	.mdc-top-app-bar__section {
		display: flex;
		align-items: center;
		gap: 16px;
		flex-direction: row;
	}

	.mdc-top-app-bar__title {
		font-size: 22px;
		font-weight: 500;
		margin: 0;
		white-space: nowrap;
		line-height: 1;
	}

	.back-btn {
		background: none;
		border: none;
		color: white;
		padding: 20px;
		cursor: pointer;
		border-radius: 50%;
		transition: all 0.2s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateY(3px);
	}

	.back-btn:hover {
		background-color: rgba(255, 255, 255, 0.15);
		transform: translateY(8px) scale(1.05);
	}

	.back-btn .material-icons {
		font-size: 28px;
	}

	/* 主要内容区域 */
	.main-content {
		padding: 20px 16px;
		padding-bottom: 120px;
	}

	/* 地址列表 */
	.addresslist {
		list-style: none;
		padding: 0;
		margin: 0 0 20px 0;
	}

	.address-card {
		background-color: white;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		margin-bottom: 16px;
		padding: 20px;
		display: flex;
		align-items: center;
		transition: all 0.3s ease;
	}

	.address-card:hover {
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
		transform: translateY(-2px);
	}

	.addresslist-left {
		flex: 1;
		cursor: pointer;
		user-select: none;
	}

	.address-header {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 12px;
	}

	.address-header .material-icons {
		color: #1976D2;
		font-size: 20px;
	}

	.address-header h3 {
		font-size: 18px;
		font-weight: 500;
		color: #333;
		margin: 0;
	}

	.address-body {
		display: flex;
		align-items: flex-start;
		gap: 8px;
	}

	.address-body .material-icons {
		color: #666;
		font-size: 20px;
		margin-top: 2px;
		flex-shrink: 0;
	}

	.address-body p {
		font-size: 14px;
		color: #666;
		margin: 0;
		line-height: 1.5;
	}

	.addresslist-right {
		display: flex;
		gap: 8px;
		align-items: center;
		margin-left: 16px;
	}

	.icon-btn {
		background: none;
		border: none;
		cursor: pointer;
		padding: 8px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s ease;
		color: #666;
	}

	.icon-btn:hover {
		background-color: #f5f5f5;
		transform: scale(1.1);
	}

	.icon-btn.delete-btn:hover {
		background-color: #ffebee;
		color: #d32f2f;
	}

	.icon-btn .material-icons {
		font-size: 24px;
	}

	/* 新增地址按钮 */
	.addbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 16px 24px;
		border-radius: 12px;
		font-size: 16px;
		font-weight: 500;
		text-transform: none;
		transition: all 0.3s ease;
		cursor: pointer;
		border: none;
		width: 100%;
		background-color: #1976D2;
		color: white;
		box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
	}

	.addbtn:hover {
		background-color: #1565C0;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);
	}

	.addbtn .material-icons {
		font-size: 20px;
	}

	.mdc-button__label {
		font-weight: 500;
	}

	/* 响应式设计 */
	@media (max-width: 600px) {
		.main-content {
			padding: 16px 12px;
		}
		
		.address-card {
			padding: 16px;
		}
	}
</style>
